<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>腾讯云视频点播示例</title>
    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.min.css" rel="stylesheet"/>
    <!-- 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。 -->
    <!-- 有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入 hls.min.x.xx.xm.js。 -->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/TXLivePlayer-1.2.3.min.js"></script>
    <!-- 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。 -->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/hls.min.1.1.6.js"></script>
    <!-- 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。 -->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/flv.min.1.6.3.js"></script>
    <!-- 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。 -->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/dash.all.min.4.5.2.js"></script>
    <!-- 播放器脚本文件 -->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>
</head>
<body>
<!-- 设置播放器容器 -->
<video muted="muted" id="player-container-id" preload="auto" width="1264" height="720" playsinline webkit-playsinline x5-playsinline></video>
<!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline x5-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
-->
<script>

    var player = TCPlayer("player-container-id", { // player-container-id 为播放器容器ID，必须与html中一致
        fileID: "243791579200621729", // 请传入需要播放的视频fileID 必须
        appID: "1309991848", // 请传入点播账号的子应用appID 必须
        psign: "", // 请传入播放器签名psign 必须
        autoplay: true,
        loop: true // 设置为循环播放
    });
    function init() {
        let socket=null
        this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {}
        console.log(this.user.username)
        // let username = this.user.username;
        let username = this.user.username
        let _this = this
        if (typeof (WebSocket) == 'undefined') {
            console.log('您的浏览器不支持WebSocket')
        } else {
            console.log('您的浏览器支持WebSocket')
            let socketUrl = 'wss://mo.jamorantxff.fun/admin/thc/imserver/' + username
            if (socket != null) {
                socket.close()
                socket = null
            }
            // 开启一个websocket服务
            socket = new WebSocket(socketUrl)
            //打开事件
            socket.onopen = function () {
                console.log('websocket已打开')
            }
            //  浏览器端收消息，获得从服务端发送过来的文本消息
            socket.onmessage = function (msg) {
                console.log('收到数据====' + msg.data)
                let data = JSON.parse(msg.data)  // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
                console.log(data.text)
                if (data.users) {  // 获取在线人员信息
                    _this.users = data.users.filter(user => user.username !== username)  // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
                } else {
                    // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
                    //  // {"from": "zhang", "text": "hello"}
                    if (data.from === _this.chatUser) {
                        _this.messages.push(data)
                        // 构建消息内容
                        _this.createContent(data.from, null, data.text)
                    }
                }
            }
        }
    }
    window.onload=function (){
        // 创建一个 JSON 对象
        const user = {
            username: 'Imss',
            email: 'Im@example.com',
            age: 30
        };

    // 将 JSON 对象转换为字符串
        const userStr = JSON.stringify(user);

    // 将 JSON 字符串设置到 sessionStorage 中
        sessionStorage.setItem('user', userStr);
        this.init()
    }
</script>
</body>
</html>
